-
Notifications
You must be signed in to change notification settings - Fork 7
/
[slug].js
60 lines (50 loc) · 1.25 KB
/
[slug].js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react'
import fetch from 'isomorphic-unfetch'
import { useQuery } from 'graphql-hooks'
import DefaultLayout from '../../layouts/Default'
export const allPostsQuery = `
query region($id: String!) {
region(id: $id) {
id
name
WAHL09(year: 2017, PART04: [CDU, SPD, AFD, FDP, DIELINKE, B90_GRUENE]) {
year
value
PART04
}
}
}
`
const Region = ({ slug, id, name }) => {
const { loading, error, data } = useQuery(allPostsQuery, {
variables: { id }
})
if (error) return <div>Error loading posts.</div>
if (loading) return <div>Loading</div>
const { WAHL09 } = data.region
return (
<DefaultLayout>
<h1>
{name} / {id} / {slug}
</h1>
<h3>Election results (2017)</h3>
<table>
<tbody>
{WAHL09.map(({ PART04: name, value }) => (
<tr key={name}>
<th>{name}</th>
<td>{value} votes</td>
</tr>
))}
</tbody>
</table>
</DefaultLayout>
)
}
Region.getInitialProps = async function(context) {
const { slug } = context.query
const res = await fetch(`http://localhost:3000/api/region/${slug}`)
const data = await res.json()
return data
}
export default Region